import React, { useState, useRef, useEffect } from 'react';
import classnames from 'classnames';
import { Form, MessagePlugin, Input, Checkbox, Button, FormInstanceFunctions, SubmitContext } from 'tdesign-react';
import { LockOnIcon, UserIcon, MailIcon, BrowseOffIcon, BrowseIcon } from 'tdesign-icons-react';
import useCountdown from '../../hooks/useCountDown';
import request from 'utils/request';

import Style from './index.module.less';
import TitleStyle from '../../title.module.less';
import { generatePath } from 'utils/path';

const { FormItem } = Form;

export default function Register() {
  const [showPsw, toggleShowPsw] = useState(false);
  const { countdown, setupCountdown } = useCountdown(60);
  const formRef = useRef<FormInstanceFunctions>();
  // useEffect(() => {
  //   const res = request.get('/api/v1/user/me');
  // }, []);

  const onSubmit = async (e: SubmitContext) => {
    if (e.validateResult === true) {
      // const { checked } = formRef.current?.getFieldsValue?.(['checked']) as { checked: boolean };
      // if (!checked) {
      //   MessagePlugin.error('请同意 TDesign 服务协议和 TDesign 隐私声明');
      //   return;
      // }
      const fieldsValue = formRef.current?.getFieldsValue?.(true);
      const res = await request.post('/api/v1/user/register', {
        phone: fieldsValue.phone,
        password: fieldsValue.password,
        nick_name: fieldsValue.nick_name,
        invite_code: fieldsValue.invite_code,
      });
      console.log(res);
      MessagePlugin.success('注册成功');
    }
  };

  return (
    <div>
      <div className={TitleStyle.titleContainer}>
        <h1 className={TitleStyle.title}>输入企业邀请码</h1>
        <div className={TitleStyle.subTitle}>
          <p className={classnames(TitleStyle.tip)}>企业邀请码是由字母组成的8位编码，可通过管理员获取。</p>
        </div>
      </div>
      <Form ref={formRef} className={classnames(Style.itemContainer)} labelWidth={0} onSubmit={onSubmit}>
        <FormItem name='invite_code' rules={[{ required: true, message: '邀请码必填', type: 'error' }]}>
          <Input maxlength={11} size='large' placeholder='请输入企业邀请码' />
        </FormItem>

        <FormItem name='nick_name' rules={[{ required: true, message: '姓名必填', type: 'error' }]}>
          <Input maxlength={11} size='large' placeholder='请输入姓名' />
        </FormItem>

        <FormItem name='password' rules={[{ required: true, message: '密码必填', type: 'error' }]}>
          <Input
            size='large'
            type={showPsw ? 'text' : 'password'}
            placeholder='请输入密码'
            suffixIcon={
              showPsw ? (
                <BrowseIcon onClick={() => toggleShowPsw((current) => !current)} />
              ) : (
                <BrowseOffIcon onClick={() => toggleShowPsw((current) => !current)} />
              )
            }
          />
        </FormItem>
        <FormItem name='confirm_password' rules={[{ required: true, message: '密码必填', type: 'error' }]}>
          <Input
            size='large'
            type={showPsw ? 'text' : 'password'}
            placeholder='请输入确定密码'
            suffixIcon={
              showPsw ? (
                <BrowseIcon onClick={() => toggleShowPsw((current) => !current)} />
              ) : (
                <BrowseOffIcon onClick={() => toggleShowPsw((current) => !current)} />
              )
            }
          />
        </FormItem>
        <FormItem
          name='phone'
          rules={[
            { required: true, message: '手机号必填', type: 'error' },
            { telnumber: true, message: '请输入正确手机号', type: 'error' },
          ]}
        >
          <Input type='text' size='large' placeholder='请输入手机号' />
        </FormItem>
        <FormItem name='verifyCode' rules={[{ required: true, message: '验证码必填', type: 'error' }]}>
          <Input size='large' placeholder='请输入验证码' />
          <Button variant='outline' className={Style.verificationBtn} disabled={countdown > 0} onClick={setupCountdown}>
            {countdown === 0 ? '发送验证码' : `${countdown}秒后可重发`}
          </Button>
        </FormItem>
        <FormItem>
          <Button block size='large' type='submit'>
            注册
          </Button>
        </FormItem>
      </Form>
    </div>
  );
}
